<template>
  <div>
    <!-- 轮播图区域 -->
    <div class="banner">
      <slide :slidePics="parentSlidePics"></slide>
      <div class="login-position-outerbox">
        <div class="login-box" v-show="isLogin">
          <div class="login-top-login">
            <div class="login-title">
              <span>账号登录</span>
            </div>
            <div class="login-input-box">
              <div class="icon-box my_text_center">
                <img src="../assets/imgs/register-phone-icon.png" alt="">
              </div>
              <input v-model.lazy="phoneNum" class="login-input-input" type="text" placeholder="请输入你的用户名" @change="phoneChange" maxlength="11">
            </div>
            <span v-show="phoneErrWarn" class="warning-text">用户名必须为2-11位字符</span>
            <div class="login-input-box">
              <div class="icon-box my_text_center">
                <img src="../assets/imgs/register-pwd-icon.png" alt="">
              </div>
              <input class="login-input-input" type="password" placeholder="请输入你的密码" v-model.lazy="userPwd" @change="pwdChange" maxlength="16">
            </div>
            <span v-show="pwdErrWarn" class="warning-text">登录密码必须为6-16位数字和字母的组合</span>
            <div class="login-btn my_text_center" @click="userLogin">
              <span>登录</span>
            </div>
            <span v-show="pwdPhoneErrWarn" class="warning-text">账号或密码错误</span>
          </div>
          <div class="login-bottom-register">
            <router-link to="/registerCenter" class="special-color">免费注册</router-link>
            <router-link to="/findPwd">忘记密码</router-link>
          </div>
        </div>
        <div class="haslogin-box my_text_center" v-show="isHasLogin">
          <div class="avatar-box">
            <img :src="avatarUrl" alt="">
          </div>
          <div class="welcome-text">
            <span>欢迎回来，{{userName}}</span>
          </div>
          <div class="logout-btn" @click="logoutUser">
            <span>退出</span>
          </div>
          <div class="toUserCenter-btn">
            <!-- <router-link :to="{ name: 'userCenter', params: {userId: userName}}" class="font-color">个人主页</router-link> -->
            <span class="font-color" @click="toUserCenter()">个人主页</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 热门彩、高频彩、低频彩区域 -->
    <div class="container">
      <div class="hot-high-low-area">
        <el-row :gutter="3">
          <el-col :span="16">
            <div class="hot-high-low-area-left">
              <div class="hot-high-low-title">
                <!-- 热门彩、高频彩、低频彩title切换 -->
                <div :class="{active:isHotChoosed}" class="hot-low-high-public" @click="hotChoosedFuc">
                  <img class="title-icon" :src="hotIconVar" alt="">
                  <span class="title-text">热门彩</span>
                </div>
                <div :class="{active:isHighChoosed}" class="hot-low-high-public" @click="highChoosedFuc">
                  <img class="title-icon" :src="highIconVar" alt="">
                  <span class="title-text">高频彩</span>
                </div>
                <div :class="{active:isLowChoosed}" class="hot-low-high-public" @click="lowChoosedFuc">
                  <img class="title-icon" :src="lowIconVar" alt="">
                  <span class="title-text">低频彩</span>
                </div>
              </div>
              <!-- 热门彩、高频彩、低频彩li内容 -->
              <div class="hot-high-low-content">
                <ul>
                  <li v-show="isCQsscOne" class="content-list-li">
                    <div class="content-list-li-header">
                      <div class="lottery-his-message">
                        <div class="lottery-msg-icon">
                          <img :src="cqsscForContent.url" alt="">
                        </div>
                        <div class="lottery-msg-detail">
                          <div class="lottery-msg-phasenum">
                            <span>{{cqsscForContent.lotteryName}}</span>
                            <span>{{cqsscForContent.periodsNum}}</span>
                            <!-- <span>{{cqsscForContent.time}}</span> -->
                          </div>
                          <div class="lottery-msg-lucknum jianada-msg-lucknum">
                            <span class="ssc-lucknum" :class="{'lucknum-item':isJiaNaDaOne}" v-for="(item,index) in cqsscForContent.winningNum">{{item}}</span>
                          </div>
                        </div>
                      </div>
                      <div class="countdown-live">
                        <span class="countdown-text">开奖倒计：</span>
                        <count-down :TypeMessage='cqsscForContent.countdown_time'></count-down>
                        <span class="lottery-to-live my_text_center" @click="toLivePageFuc(cqsscForContent.id)">开奖直播</span>
                      </div>
                    </div>
                    <div class="content-list-li-table my_text_center">
                      <ul class="li-table-out-ul">
                        <li class="li-table-out-li" v-for="(e,i) in cqsscForContent.tableData">
                          <div class="li-table-table-header">{{e.title}}</div>
                          <ul class="li-table-inner-ul">
                            <li class="li-table-inner-li" v-for="el in e.details">{{el}}</li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                    <div class="content-list-li-bottom">
                      <div class="list-li-bottom-line">
                        <div class="bottom-line-one"></div>
                        <div class="bottom-line-two"></div>
                      </div>
                      <div class="list-li-bottom-alink">
                        <span class="alink-btn" v-for="(item,index) in cqsscForContent.toPageUrl" :class="{active:item.status}" @click="sschotHighLowToPagesFuc(index,item.name,cqsscForContent.id,cqsscForContent,cqsscForContent.identification)">{{item.name}}</span>
                      </div>
                    </div>
                  </li>
                  <li v-show="isCQsscTwo" class="content-list-li">
                    <div class="content-list-li-header">
                      <div class="lottery-his-message">
                        <div class="lottery-msg-icon">
                          <img :src="cqsscForContentTwo.url" alt="">
                        </div>
                        <div class="lottery-msg-detail">
                          <div class="lottery-msg-phasenum">
                            <span>{{cqsscForContentTwo.lotteryName}}</span>
                            <span>{{cqsscForContentTwo.periodsNum}}</span>
                            <!-- <span>{{cqsscForContentTwo.time}}</span> -->
                          </div>
                          <div class="lottery-msg-lucknum jianada-msg-lucknum">
                            <span class="ssc-lucknum" :class="{'lucknum-item':isJiaNaDaTwo}" v-for="(item,index) in cqsscForContentTwo.winningNum">{{item}}</span>
                          </div>
                        </div>
                      </div>
                      <div class="countdown-live">
                        <span class="countdown-text">开奖倒计：</span>
                        <count-down :TypeMessage='cqsscForContentTwo.countdown_time'></count-down>
                        <span class="lottery-to-live my_text_center" @click="toLivePageFuc(cqsscForContentTwo.id)">开奖直播</span>
                      </div>
                    </div>
                    <div class="content-list-li-table my_text_center">
                      <ul class="li-table-out-ul">
                        <li class="li-table-out-li" v-for="(e,i) in cqsscForContentTwo.tableData">
                          <div class="li-table-table-header">{{e.title}}</div>
                          <ul class="li-table-inner-ul">
                            <li class="li-table-inner-li" v-for="el in e.details">{{el}}</li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                    <div class="content-list-li-bottom">
                      <div class="list-li-bottom-line">
                        <div class="bottom-line-one"></div>
                        <div class="bottom-line-two"></div>
                      </div>
                      <div class="list-li-bottom-alink">
                        <span class="alink-btn" v-for="(item,index) in cqsscForContentTwo.toPageUrl" :class="{active:item.status}" @click="sschotHighLowToPagesFuc(index,item.name,cqsscForContentTwo.id,cqsscForContentTwo,cqsscForContentTwo.identification)">{{item.name}}</span>
                      </div>
                    </div>
                  </li>
                  <li v-show="isPK10One" class="content-list-li">
                    <div class="content-list-li-header">
                      <div class="lottery-his-message">
                        <div class="lottery-msg-icon">
                          <img :src="pk10ForContent.url" alt="">
                        </div>
                        <div class="lottery-msg-detail">
                          <div class="lottery-msg-phasenum">
                            <span>{{pk10ForContent.lotteryName}}</span>
                            <span>{{pk10ForContent.periodsNum}}</span>
                            <!-- <span>{{pk10ForContent.time}}</span> -->
                          </div>
                          <div class="lottery-msg-lucknum pk10-msg-luck">
                            <span class="pk10-lucknum-item" :style="{backgroundColor:item.color}" v-for="item in pk10ForContent.winningNum">{{item.number}}</span>
                          </div>
                        </div>
                      </div>
                      <div class="countdown-live">
                        <span class="countdown-text">开奖倒计：</span>
                        <count-down :TypeMessage='pk10ForContent.countdown_time'></count-down>
                        <span class="lottery-to-live my_text_center" @click="toLivePageFuc(pk10ForContent.id)">开奖直播</span>
                      </div>
                    </div>
                    <div class="content-list-li-table my_text_center">
                      <ul class="li-table-out-ul">
                        <li class="li-table-out-li" v-for="(e,i) in pk10ForContent.tableData">
                          <div class="li-table-table-header">{{e.title}}</div>
                          <ul class="li-table-inner-ul">
                            <li class="li-table-inner-li" v-for="el in e.details">{{el}}</li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                    <div class="content-list-li-bottom">
                      <div class="list-li-bottom-line">
                        <div class="bottom-line-one"></div>
                        <div class="bottom-line-two"></div>
                      </div>
                      <div class="list-li-bottom-alink">
                        <span class="alink-btn" v-for="(item,index) in pk10ForContent.toPageUrl" :class="{active:item.status}" @click="sschotHighLowToPagesFuc(index,item.name,pk10ForContent.id,pk10ForContent,pk10ForContent.identification)">{{item.name}}</span>
                      </div>
                    </div>
                  </li>
                  <li v-show="isPK10Two" class="content-list-li">
                    <div class="content-list-li-header">
                      <div class="lottery-his-message">
                        <div class="lottery-msg-icon">
                          <img :src="pk10ForContentTwo.url" alt="">
                        </div>
                        <div class="lottery-msg-detail">
                          <div class="lottery-msg-phasenum">
                            <span>{{pk10ForContentTwo.lotteryName}}</span>
                            <span>{{pk10ForContentTwo.periodsNum}}</span>
                            <!-- <span>{{pk10ForContentTwo.time}}</span> -->
                          </div>
                          <div class="lottery-msg-lucknum pk10-msg-luck">
                            <span class="pk10-lucknum-item" :style="{backgroundColor:item.color}" v-for="item in pk10ForContentTwo.winningNum">{{item.number}}</span>
                          </div>
                        </div>
                      </div>
                      <div class="countdown-live">
                        <span class="countdown-text">开奖倒计：</span>
                        <count-down :TypeMessage='pk10ForContentTwo.countdown_time'></count-down>
                        <span class="lottery-to-live my_text_center" @click="toLivePageFuc(pk10ForContentTwo.id)">开奖直播</span>
                      </div>
                    </div>
                    <div class="content-list-li-table my_text_center">
                      <ul class="li-table-out-ul">
                        <li class="li-table-out-li" v-for="(e,i) in pk10ForContentTwo.tableData">
                          <div class="li-table-table-header">{{e.title}}</div>
                          <ul class="li-table-inner-ul">
                            <li class="li-table-inner-li" v-for="el in e.details">{{el}}</li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                    <div class="content-list-li-bottom">
                      <div class="list-li-bottom-line">
                        <div class="bottom-line-one"></div>
                        <div class="bottom-line-two"></div>
                      </div>
                      <div class="list-li-bottom-alink">
                        <span class="alink-btn" v-for="(item,index) in pk10ForContentTwo.toPageUrl" :class="{active:item.status}" @click="sschotHighLowToPagesFuc(index,item.name,pk10ForContentTwo.id,pk10ForContentTwo,pk10ForContentTwo.identification)">{{item.name}}</span>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </el-col>
          <!-- 彩票资讯 -->
          <el-col :span="8">
            <div class="hot-high-low-area-right">
              <download-icon></download-icon>
              <div class="right-news-lists">
                <div class="news-lists-title">
                  <div class="news-lists-title-left">
                    <span class="title-left-bigfont">玩彩技巧</span>
                    <span class="title-left-smallfont">/&nbsp;LOTTERY SKILLS</span>
                  </div>
                  <div class="news-lists-title-right my_text_center" @click="chartAreaArrowJumpFuc">
              <img src="../assets/imgs/arrow-left-small-gray.png" alt="">
            </div>
                </div>
                <div class="news-lists-details">
                  <ul>
                    <li class="lists-details-li" v-for="(item,index) in chartSkillList" :class="{active:item.status}" @click="changeChartListsStatus(item.id,index)">
                      <span class="details-li-title">[{{item.title}}]</span>
                      <span class="details-li-detail">{{item.detail}}</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 计划预测区域 -->
    <div class="plan-forecast-area">
      <div class="container">
        <div class="plan-forecast-title my_text_center">
          <img src="../assets/imgs/index-plan-title.png" alt="">
          <div class="more" @click="toMore">更多&nbsp;></div>
        </div>
        <div class="plan-forecast-icon-list">
          <div class="icon-out-box" v-for="(item,index) in planForecastIconText">
            <p class="icon-inner-big-text">{{item.num}}</p>
            <p class="icon-inner-small-text">{{item.text}}</p>
          </div>
        </div>
        <div class="plan-forecast-lottery-list">
          <div :class="{active:item.status}" class="lottery-list-item-outerbox" v-for="(item,index) in planForecastData" @mouseover="changeLotteryList(index)">
            <div class="lottery-list-item my_text_center" @click="toForecastRecommendPage(item.id,item.type_identification)">
              <span>{{item.title}}</span>
            </div>
            <div class="list-item-line"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 图表展示区域 -->
    <div class="container">
      <div class="chart">
        <div class="chart-left">
          <div class="chart-left-title">
            <!-- 彩票名称展示区 -->
            <div class="left-title-item" v-for="(item,index) in chartLotteryTitle">
              <div :class="{active:item.status}" :data-id='item.id' class="left-title-text" @click="chartTitleChange($event,index)">{{item.title}}</div>
              <div class="left-title-line"></div>
            </div>
          </div>
          <div class="left-chart-box">
            <div class="chart-tabs">
              <!-- 球号切换区 -->
              <div class="chart-tabs-left">
                <span v-for="(item,index) in chartTotalData" @click="changeChartTabs(index,item.id)" :class="{active:item.status}" v-show="item.title">{{item.title}}</span>
                <p class="my_text_center charts-title" v-show="isShowChartsTitle">总和走势图</p>
              </div>
              <div class="chart-tabs-right">
                <span class="toDetailsBtn" @click="toZouShiTuBiao">详细&nbsp;></span>
              </div>
            </div>
            <div id="myChart" :style="{width:'800px',height:'260px'}"></div>
          </div>
        </div>
        <div class="chart-right">
          <div class="news-lists-title">
            <div class="news-lists-title-left">
              <span class="title-left-bigfont">彩票资讯</span>
              <span class="title-left-smallfont">/&nbsp;LOTTERY SKILLS</span>
            </div>
            <div class="news-lists-title-right my_text_center">
              <!-- <img src="../assets/imgs/arrow-left-small-gray.png" alt=""> -->
                         <router-link to='/news'><img src="../assets/imgs/arrow-left-small-gray.png" alt=""></router-link>
            </div>
          </div>
          <div class="news-lists-details">
            <ul>
              <li class="lists-details-li" v-for="(item,index) in newsListsArr" :class="{active:item.status}" @click="changeNewsListsStatus(item.id,index)">
                <span class="details-li-title">{{item.title}}</span>
                <span class="details-li-detail">{{item.time}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Slide from "../components/Slide";
import CountDown from "../../src/components/cqssc/components/CountDown";
import DownloadIcon from "../components/DownloadIcon";

import HotIcon from "../assets/imgs/hot-icon.png";
import HighIcon from "../assets/imgs/high-icon.png";
import LowIcon from "../assets/imgs/low-icon.png";
import HotActiveIcon from "../assets/imgs/hot-active-icon.png";
import HighActiveIcon from "../assets/imgs/high-active-icon.png";
import LowActiveIcon from "../assets/imgs/low-active-icon.png";

let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/line");
require("echarts/lib/component/tooltip");

export default {
  components: {
    Slide,
    CountDown,
    DownloadIcon
  },
  data() {
    return {
      parentSlidePics: [],
      isLogin: true,
      isHasLogin: false,
      phoneErrWarn: false,
      pwdErrWarn: false,
      phoneNum: null,
      userPwd: null,
      avatarUrl: "",
      userName: "",
      pwdPhoneErrWarn: false,
      hotIconVar: HotActiveIcon,
      lowIconVar: LowIcon,
      highIconVar: HighIcon,
      newsListsArr: [],
      planForecastData: [],
      planForecastIconText: null,
      chartLotteryTitle: [],
      chartSkillList: [],
      hotHighLowArr: [],
      isHotChoosed: true,
      isHighChoosed: false,
      isLowChoosed: false,
      isCQsscOne: false,
      isCQsscTwo: false,
      isJiaNaDaOne: false,
      isJiaNaDaTwo: false,
      isPK10One: false,
      isPK10Two: false,
      cqsscForContent: {},
      cqsscForContentTwo: {},
      pk10ForContent: {},
      pk10ForContentTwo: {},
      chartTotalData: [],
      chartXData: [],
      chartYData: [],
      lottery_id: 1, //彩种id
      titleIndex: 0,
      isShowChartsTitle: false, //是否显示图表区没有球号的彩种的表头
      indexLotterytype: "ssc"
    };
  },
  mounted() {
    //获取banner
    this.axios
      .get("index/getObtainIndexBanner")
      .then(res => {
        if (res.data.status) {
          this.parentSlidePics = res.data.data;
        } else {
          this.log(res.data.message);
        }
      })
      .catch(err => {
        this.log(err);
      });
    //获得资讯列表
    this.axios
      .get("index/getObtainLotteryInformationLimit")
      .then(res => {
        if (res.data.status) {
          this.newsListsArr = res.data.data.content;
        } else {
          this.log(res.data.message);
        }
      })
      .catch(err => {
        this.log(err);
      });
    //获取预测推荐计划
    this.axios
      .get("index/getObtainForecastPlanList")
      .then(res => {
        // console.log(res.data.data)
        if (res.data.status) {
          this.planForecastData = res.data.data;
          // console.log(this.planForecastData)
          this.planForecastIconText = this.planForecastData[0].content;
        } else {
          this.log(res.data.message);
        }
      })
      .catch(err => {
        this.log(err);
      });
    //获取图表数据
    this.getChartsTotalData(true);
    // this.$store.commit("getLotteryType",this.indexLotterytype)
    //获取玩彩技巧
    this.axios
      .get("index/getObtainPlayingSkillsLimit")
      .then(res => {
        if (res.data.status) {
          for (var i in res.data.data) {
            if (res.data.data[i].title.length > 5) {
              res.data.data[i].title = res.data.data[i].title.substr(0, 5);
            }
            if (res.data.data[i].detail.length > 10) {
              res.data.data[i].detail =
                res.data.data[i].detail.substr(3, 15) + "...";
            }
          }
          this.chartSkillList = res.data.data; //玩儿法技巧
        } else {
          this.log(res.data.message);
        }
      })
      .catch(err => {
        this.log(err);
      });
    //获取热门彩、高频彩、低频彩数据
    this.getHotHighLowTotalData();

    //路由切换以后，获取session里的用户信息
    if (sessionStorage.getItem("id")) {
      this.isLogin = false;
      this.isHasLogin = true;
      this.avatarUrl = sessionStorage.getItem("avatarUrl");
      this.userName = sessionStorage.getItem("id");
    }
  },
  watch: {
    toUpdate: function(data) {
      //如果第一个li是时时彩、广东11选5、福彩3D、江苏快3、加拿大28、PC蛋蛋
      if (this.cqsscForContent.id == data.lottery_id) {
        if (this.cqsscForContent.id == 9 || this.cqsscForContent.id == 13) {
          this.isJiaNaDaOne = true;
          this.cqsscForContentTwo.periodsNum = '第' + data.lotteryData.short_expect + '期';
        }else{
          this.cqsscForContent.periodsNum = data.lotteryData.periodsNum; //更新开奖期数
        }
        this.cqsscForContent.tableData = this.$store.state.Table; //更新彩票大厅表格
        this.cqsscForContent.countdown_time = data.countdown_time; //更新倒计时
        this.cqsscForContent.winningNum = data.lotteryData.open_code; //开奖球号
        this.cqsscForContent.time = data.time; //开奖时间
        //如果第二个li是时时彩、广东11选5、福彩3D、江苏快3、加拿大28、PC蛋蛋
      } else if (this.cqsscForContentTwo.id == data.lottery_id) {
        if (
          this.cqsscForContentTwo.id == 9 ||
          this.cqsscForContentTwo.id == 13
        ) {
          this.isJiaNaDaTwo = true;
          this.cqsscForContentTwo.periodsNum = '第' + data.lotteryData.short_expect + '期';
        }else{
          this.cqsscForContentTwo.periodsNum = data.lotteryData.periodsNum; //更新开奖期数     
        }
        this.cqsscForContentTwo.tableData = this.$store.state.Table; //更新彩票大厅表格
        this.cqsscForContentTwo.countdown_time = data.countdown_time; //更新倒计时
        this.cqsscForContentTwo.winningNum = data.lotteryData.open_code; //开奖球号
        this.cqsscForContentTwo.time = data.time; //开奖时间
        //如果第一个li是北京PK10
      } else if (this.pk10ForContent.id == data.lottery_id) {
        // console.log(data)
        this.pk10ForContent.tableData = this.$store.state.Table; //更新彩票大厅表格
        this.pk10ForContent.countdown_time = data.countdown_time; //更新倒计时
        this.pk10ForContent.periodsNum = '第' + data.lotteryData.short_expect + '期'; //更新开奖期数
        this.pk10ForContent.winningNum = data.lotteryData.open_code; //开奖球号
        this.pk10ForContent.time = data.time; //开奖时间
        //如果第二个li是北京PK10
      } else if (this.pk10ForContentTwo.id == data.lottery_id) {
        // console.log(data)
        this.pk10ForContentTwo.tableData = this.$store.state.Table; //更新彩票大厅表格
        this.pk10ForContentTwo.countdown_time = data.countdown_time; //更新倒计时
        this.pk10ForContentTwo.periodsNum = '第' + data.lotteryData.short_expect + '期'; //更新开奖期数
        this.pk10ForContentTwo.winningNum = data.lotteryData.open_code; //开奖球号
        this.pk10ForContentTwo.time = data.time; //开奖时间
      }
    }
  },
  computed: {
    toUpdate() {
      return this.$store.state.TypeMessage;
    }
  },
  methods: {
    // 更多
    toMore() {
      this.$store.commit("getLotteryType", "ssc");
      this.$router.push("/forecastrecommend/1");
    },
    //退出登录
    logoutUser() {
      this.isLogin = true;
      this.isHasLogin = false;
      sessionStorage.clear();
    },

    //输入用户名
    phoneChange() {
      let regUserName = /^([A-Za-z0-9_]{2,11})$/gi;
      this.phoneErrWarn = !regUserName.test(this.phoneNum);
    },

    //输入密码
    pwdChange() {
      let reg = /^((?!^\d+$)(?!^[a-zA-Z]+$)[A-Za-z0-9]{6,16})$/gi;
      this.pwdErrWarn = !reg.test(this.userPwd);
    },
    //点击登录按钮
    userLogin() {
      if (this.phoneNum && this.userPwd) {
        sessionStorage.phoneNum = this.phoneNum;
        this.axios
          .post("user/postUserLogin", {
            user_name: this.phoneNum,
            password: this.userPwd
          })
          .then(res => {
            if (res.data.status) {
              this.isLogin = false;
              this.isHasLogin = true;
              this.avatarUrl = res.data.data.avatar;
              this.userName = res.data.data.user_name;
              this.phoneNum = "";
              this.userPwd = "";
              sessionStorage.setItem("id", res.data.data.id);
              sessionStorage.setItem("avatarUrl", res.data.data.avatar);
            } else {
              this.pwdPhoneErrWarn = true;
            }
          })
          .catch(err => {
            this.log(err);
          });
      }
    },
    //跳转到用户中心页面
    toUserCenter() {
      this.$router.push(`/userCenter/${this.userName}`);
    },
    //跳转到新闻详情页面
    changeNewsListsStatus(newID, index) {
      this.newsListsArr.forEach((elem, i) => {
        if (i === index) {
          elem.status = 1;
        } else {
          elem.status = 0;
        }
      });
      this.$router.push(`/news/${newID}`);
    },
    //鼠标划入计划预测页面底部的title组，改变数据和状态
    changeLotteryList(index) {
      this.planForecastData.forEach((elem, i) => {
        if (index === i) {
          elem.status = 1;
          this.planForecastIconText = this.planForecastData[i].content;
        } else {
          elem.status = 0;
        }
      });
    },
    //玩儿法技巧item,跳转帮助中心
    changeChartListsStatus(helpID, index) {
      this.$router.push(`/helpCenter/${helpID}`);
    },
    //热门彩
    hotChoosedFuc() {
      this.isHotChoosed = true;
      this.isHighChoosed = false;
      this.isLowChoosed = false;
      this.hotIconVar = HotActiveIcon;
      this.lowIconVar = LowIcon;
      this.highIconVar = HighIcon;
      this.getHotHighLowTotalData();
    },
    //高频彩
    highChoosedFuc() {
      this.isHotChoosed = false;
      this.isHighChoosed = true;
      this.isLowChoosed = false;
      this.hotIconVar = HotIcon;
      this.lowIconVar = LowIcon;
      this.highIconVar = HighActiveIcon;
      this.getHotHighLowTotalData("high");
    },
    //低频彩
    lowChoosedFuc() {
      this.isHotChoosed = false;
      this.isHighChoosed = false;
      this.isLowChoosed = true;
      this.hotIconVar = HotIcon;
      this.lowIconVar = LowActiveIcon;
      this.highIconVar = HighIcon;
      this.getHotHighLowTotalData("low");
    },
    //判断热门彩、高频彩、低频彩区域li的具体内容
    hotHighLowLiContentFuc(elem) {
      switch (elem.length) {
        case 0:
          this.isCQsscOne = false;
          this.isCQsscTwo = false;
          this.isPK10One = false;
          this.isPK10Two = false;
          break;
        case 1:
          this.isCQsscTwo = false;
          this.isPK10Two = false;
          if (
            elem[0].identification == "ssc" ||
            elem[0].identification == "l11x5" ||
            elem[0].identification == "l3d" ||
            elem[0].identification == "k3" ||
            elem[0].identification == "l28"
          ) {
            this.isJiaNaDaOne = false;
            if (elem[0].identification == "l28") {
              this.isJiaNaDaOne = true;
            }
            this.isCQsscOne = true;
            this.cqsscForContent = elem[0];
            this.isPK10One = false;
          } else {
            this.isCQsscOne = false;
            this.isPK10One = true;
            this.pk10ForContent = elem[0];
          }
          break;
        case 2:
          //如果第一个li是时时彩、广东11选5、福彩3D、江苏快3、加拿大28、PC蛋蛋
          if (
            elem[0].identification == "ssc" ||
            elem[0].identification == "l11x5" ||
            elem[0].identification == "l3d" ||
            elem[0].identification == "k3" ||
            elem[0].identification == "l28"
          ) {
            this.isCQsscOne = true;
            this.isJiaNaDaOne = false;
            if (elem[0].identification == "l28") {
              this.isJiaNaDaOne = true;
            }
            this.isPK10One = false;
            this.cqsscForContent = elem[0];
          } else {
            this.isCQsscOne = false;
            this.isPK10One = true;
            this.pk10ForContent = elem[0];
          }
          //如果第二个li是时时彩、广东11选5、福彩3D、江苏快3、加拿大28、PC蛋蛋
          if (
            elem[1].identification == "ssc" ||
            elem[1].identification == "l11x5" ||
            elem[1].identification == "l3d" ||
            elem[1].identification == "k3" ||
            elem[1].identification == "l28"
          ) {
            this.isCQsscTwo = true;
            this.isJiaNaDaTwo = false;
            if (elem[1].identification == "l28") {
              this.isJiaNaDaTwo = true;
            }
            this.isPK10Two = false;
            this.cqsscForContentTwo = elem[1];
            //如果第二个li是北京PK10
          } else {
            this.isCQsscTwo = false;
            this.isPK10Two = true;
            this.pk10ForContentTwo = elem[1];
          }
          break;
        default:
          break;
      }
    },
    //获取热门彩、高频彩、低频彩区域的数据
    getHotHighLowTotalData(type = "hot") {
      this.axios
        .get(`index/getObtainLotteryHallByType?type=${type}`)
        .then(res => {
          if (res.data.status) {
            this.hotHighLowArr = res.data.data.content;
            this.hotHighLowLiContentFuc(this.hotHighLowArr);
          } else {
            this.log(res.data.message);
          }
        })
        .catch(err => {
          this.log(err);
        });
    },
    //li的底部tabs跳转
    sschotHighLowToPagesFuc(index, name, caizhongID, content,caizhongType) {
      content.toPageUrl.forEach((elem, i) => {
        if (i == index) {
          elem.status = 1;
        } else {
          elem.status = 0;
        }
      });
      if (name == "历史开奖") {
        this.$router.push(`/lotterylobby/${caizhongID}`);
      } else if (name == "预测推荐") {
        this.$store.commit("getLotteryType",caizhongType);
        this.$router.push(`/forecastrecommend/${caizhongID}`);
      } else if (name == "走势分析") {
        this.$store.commit("getLotteryType",caizhongType);
        this.$router.push(`/charts/${caizhongID}`);
      } else if (name == "冷热分析") {
        this.$store.commit("indexToColdHotTrue");
        this.$store.commit("getLotteryType",caizhongType);
        this.$router.push(`lotterylobby/${caizhongID}/analyze/lrfx`);
      } else if (name == "技巧文章") {
        this.chartSkillList.forEach((el, i) => {
          if (i == 0) {
            this.$router.push(`helpCenter/${el.id}`);
          }
        });
      }
    },
    //绘制图表
    drawLine() {
      let chartsContainer = document.getElementById("myChart");
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(chartsContainer);
      myChart.setOption({
        xAxis: {
          type: "category",
          name: "期号",
          nameLocation: "middle",
          nameGap: "40",
          data: this.chartXData,
          axisLabel: {
            textStyle: {
              color: "#686868",
              fontSize: "11"
            },
            rotate: -45
          }
        },
        yAxis: {
          type: "value",
          name: "号\n码",
          nameLocation: "middle",
          nameGap: "40",
          nameRotate: 0,
          axisLabel: {
            textStyle: {
              color: "#686868",
              fontSize: "11"
            }
          }
        },
        series: [
          {
            data: this.chartYData,
            type: "line",
            itemStyle: {
              normal: {
                color: "#3A83D9",
                lineStyle: {
                  color: "#3A83D9"
                }
              }
            }
          }
        ]
      });
    },
    //图表展示区切换第几球
    changeChartTabs(index) {
      this.chartTotalData.forEach((el, i) => {
        if (index == i) {
          el.status = 1;
        } else {
          el.status = 0;
        }
      });
      this.getChartsTotalData(false, this.titleIndex, this.lottery_id, index);
    },
    //跳转直播页
    toLivePageFuc(ID) {
      this.$router.push(`/live/${ID}`);
    },
    //点击预测推荐区域的详细，跳转预测推荐页面
    toForecastRecommendPage(toRes, toType) {
      this.$store.commit("getLotteryType", toType);
      this.$router.push(`/forecastrecommend/${toRes}`);
    },
    //玩彩技巧版块点击箭头跳转
    chartAreaArrowJumpFuc() {
      this.chartSkillList.forEach((el, i) => {
        if (i == 0) {
          this.$router.push(`helpCenter/${el.id}`);
        }
      });
    },
    //切换图表区域的彩种
    chartTitleChange(e, index) {
      this.lottery_id = e.target.getAttribute("data-id"); //获取当前彩种
      this.titleIndex = index; //获取当前彩种的下标
      this.chartLotteryTitle.forEach((elem, i) => {
        if (index == i) {
          elem.status = 1;
          this.$store.commit("getLotteryType", elem.type);
        } else {
          elem.status = 0;
        }
      });
      this.getChartsTotalData(false, index, this.lottery_id);
    },
    //获取走势图表内彩票名称、球号信息、图表数据
    /**
     * @param {Boolean} isMounted  是否是在挂载页面时请求数据
     * @param {Number} titleIndex  彩种标题索引
     * @param {Number} id  彩种ID
     * @param {Number} ball  球号索引
     */
    getChartsTotalData(isMounted = false, titleIndex = 0, id = 0, ball = 0) {
      this.axios
        .get(
          "index/getObtainIndexHorizontalTrend?lottery_id=" +
            id +
            "&ball_id=" +
            ball
        )
        .then(res => {
          if (res.data.status) {
            this.indexLotterytype = res.data.data.lottery;
            this.indexLotterytype.forEach((elem, i) => {
              if (elem.status == 1) {
                this.$store.commit("getLotteryType", elem.type);
              }
            });
            this.indexLotterytype = res.data.data.lottery[0].type;
            this.chartXData = [];
            this.chartYData = []; //将之前图标数据清空
            this.chartLotteryTitle = res.data.data.lottery;
            if (isMounted) {
              this.lottery_id = this.chartLotteryTitle[0].id;
            }
            this.chartTotalData = res.data.data.trendList;
            //没有球号的彩种
            if (
              this.chartLotteryTitle[titleIndex].type == "l28" ||
              this.chartLotteryTitle[titleIndex].type == "k3"
            ) {
              this.isShowChartsTitle = true;
              this.chartTotalData.forEach(el => {
                this.chartXData.push(el.periods);
                this.chartYData.push(el.number);
              });
            } else {
              //有球号的彩种
              this.isShowChartsTitle = false;
              this.chartTotalData[ball].data.forEach(el => {
                this.chartXData.push(el.periods);
                this.chartYData.push(el.number);
              });
            }
            this.drawLine(); //echarts初始化
          } else {
            this.log(res.data.message);
          }
        })
        .catch(err => {
          this.log(err);
        });
    },
    //点击图表区域的“详细”跳转
    toZouShiTuBiao() {
      this.$router.push(`/charts/${this.lottery_id}`);
    }
  }
};
</script>
<style lang="less" scoped>
@import url(../assets/css/index.less);
</style>

